<template>
    <div>
        <!-- 导航部分开始 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>生产管理</el-breadcrumb-item>
            <el-breadcrumb-item>生产报工</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 导航部分结束 -->
        <!-- 搜索栏开始 -->
        <el-form style="margin-top: 15px;" :inline="true" :model="searchFeedback" class="demo-form-inline">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="报工类型">
                        <el-select v-model="searchFeedback.feedbackType" placeholder="请选择报工类型">
                            <el-option label="自行报工" value="自行报工" />
                            <el-option label="统一报工" value="统一报工" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="工作站名称">
                        <el-input v-model="searchFeedback.workstationName" placeholder="请输入工作站名称" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="生产工单编号">
                        <el-input v-model="searchFeedback.workOrderCode" placeholder="请输入生产工单编号" clearable />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="产品物料编号">
                        <el-input v-model="searchFeedback.itemCode" placeholder="请输入产品物料编号" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="产品物料名称">
                        <el-input v-model="searchFeedback.itemName" placeholder="请输入产品物料名称" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="报工人">
                        <el-input v-model="searchFeedback.userName" placeholder="请输入报工人" clearable />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="记录人">
                <el-input v-model="searchFeedback.recordUser" placeholder="请输入记录人" clearable />
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="searchFeedback.status" placeholder="请选择状态">
                    <el-option label="草稿" value="草稿" />
                    <el-option label="已确认" value="已确认" />
                    <el-option label="审批中" value="审批中" />
                    <el-option label="已审批" value="已审批" />
                    <el-option label="已完成" value="已完成" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="loadFeedback">搜索</el-button>
                <el-button @click="handleReset"><el-icon>
                        <refresh />
                    </el-icon>重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 搜索栏结束 -->

        <!-- 表格 开始 -->
        <el-table ref="feedbackTable" :data="feedbacks" max- height="400px" stripe="true" border="true"
            style="width: 100%;margin-top: 10px;">
            <el-table-column type="selection" width="55" />
            <el-table-column width="120" label="报工类型" property="feedbackType" />
            <el-table-column width="120" label="工作站" property="workstationName" />
            <el-table-column width="150" label="生产工单编号" property="workOrderCode" />
            <el-table-column width="120" label="产品物料编码" property="itemCode" />
            <el-table-column width="120" label="产品物料名称" property="itemName" />
            <el-table-column width="120" label="规格型号" property="specification" />
            <el-table-column width="120" label="报工数量" property="quantityFeedback" />
            <el-table-column width="120" label="报工人" property="userName" />
            <el-table-column width="120" label="报工时间" property="feedbackTime" />
            <el-table-column width="120" label="审核人" property="nickName" />
            <el-table-column width="120" label="状态" property="status" />
            <el-table-column width="200" align="center" label="操作">
                <template #default="scope">
                    <el-button size="small" @click="showProcessContent(scope.row)">查看</el-button>
                    <el-button size="small" @click="showProcessContent(scope.row)">修改</el-button>
                    <el-popconfirm confirm-button-text="是" cancel-button-text="点错了" @confirm="handleDelete(scope.row)"
                        title="您是否要删除这行数据">
                        <template #reference>
                            <el-button size="small" type="danger">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 表格 结束 -->
        <!-- 分页栏开始 -->
        <el-pagination style="margin-top: 15px;" :page-size="feedbackLimit" :pager-count="feedbackMaxPage"
            @current-change="changePage" background layout="prev, pager, next" :total="feedbackTotal" />
        <!-- 分页栏结束 -->
    </div>
</template>
<script>
import feedbackRequest from '../../../api/pro-feedback-api';
export default {
    data() {
        return {
            searchFeedback: {},
            feedbackCurrPage: 1, // 工序分页的当前页码
            feedbackLimit: 10, // 工序分页的每页大小
            feedbackTotal: 0, // 工序列表的总条数
            feedbackMaxPage: 1,//工序列表的最大页码

            feedbacks: [],

        }
    },
    methods: {
        loadFeedback() {
            feedbackRequest.list(this.feedbackCurrPage, this.feedbackLimit,
                this.feedbacks, res => {
                    // 设置数据
                    this.feedbacks = res.data.list;
                    this.feedbackTotal = res.data.total;
                    this.feedbackMaxPage = res.data.pages;
                });
        },
        /**
         * 条件搜索重置按钮事件
         */
        handleReset() {
            this.searchFeedback = {};
            this.loadFeedback();
        },
        /**
        * 行编辑按钮事件
        * @param {*} row 整行数据
        */
        handleDelete(row) {
            feedbackRequest.delete(row.recordId, res => {
                if (res.code == 200) {
                    this.$message({
                        type: "success",
                        message: "删除成功"
                    });
                    this.loadFeedback();
                } else {
                    this.$message({
                        type: "error",
                        message: "删除失败"
                    });
                }
            })
        },

    },
    mounted() {
        this.loadFeedback();

    }
}
</script>